  <template>
    <div class="app">
      <div class="bar-container">
        <div style="display:flex;gap:1rem;">
          <div v-for="(item, index) in barItems" :key="index" @click="toggleBarItem(index)"
               :class="{ 'bar-item': true, 'activity': item.isActivity, 'default': !item.isActivity }">
            <span>{{ item.text }}</span>
          </div>
        </div>
        <div style="display: flex;flex-direction: column;">
          <div style="display: flex;align-items: center;padding:1rem;" v-for="(item, index) in applicantItems"
               :key="index">
            <div v-if="isBatchEdit">
              <checkbox :checked="item.isSeleted"/>
            </div>
            <div
                style="display: flex;flex-direction: column;gap: 1rem;background-color: white; word-break: keep-all;width: 100%;">
              <div style="display: flex;justify-content: space-between;">
                <div style="display: flex;gap: .25rem;">
                  <div class="image">
<!--                    <img src="../../images/defultAvatar-1.png" mode=""-->
<!--                         style="width: 50px; height: 100%;"/>-->
                  </div>
                  <div style="display: flex;flex-direction: column;gap: .25rem;">
                    <div>
                    </div>
                    <div style="display: flex;gap: .25rem;">
                      <span>{{ item.name }}</span>
<!--                      <div class="contant_us"><img src="../../images/man.png" mode=""-->
<!--                                                   style="width: 25px; height: 80%;"/></div>-->
                      <span class="real-name"
                            :style="'font-size: 12px;line-height: 1.5rem; padding: 0 .5rem; '+(item.isRealname ? 'color:#9B7748;':'color: red;')">{{
                          item.isRealname ? '已实名' : '未实名'
                        }}</span>
                    </div>
                    <div class="b-desc" style="display: flex;gap: .25rem; color: grey; font-size: 14px">
                      <div class="text"><span style="padding:0 2px">{{ item.age }}</span><text style="padding: 0 4rpx"> |</text></div>
                      <div class="text"><span style="padding:0 2px">{{ item.degree }}</span><text style="padding: 0 4rpx"> |</text></div>
                      <div class="text"><span>{{ item.worktime }}经验</span></div>
                    </div>
                  </div>

                </div>
                <div style="display: flex;flex-direction: column;align-items: flex-end;">
                  <div class="search-bar" style="font-size: 15px">收藏</div>
                </div>
              </div>
              <div style="display: flex;justify-content: space-between; ">
                <div style="display: flex; flex-direction: column;">
                  <div style="display: flex; gap: 0.25rem; align-items: center;">
                    <span
                        style="width:fit-content; display: flex; align-items: center; color: white; padding: 0 .5rem; border-radius: .3rem; background-color: #34A1FF;">{{
                        item.applicantType
                      }}</span>
                  </div>
                  <div style="display: flex; gap: 0.25rem; align-items: center;">
                    <span style="font-size:12px; color:gray;">意向</span>
                    <span>{{ item.intention }}</span>
                  </div>
                </div>
                <div style="display: flex; flex-direction: column; align-items: flex-end;">
                  <span style="color:gray;">{{ item.location }}</span>
                  <span style="display: flex; align-items: baseline;">
                   <samp>￥</samp>
                  <span style="color:#FF9E24;">{{ item.amount }}</span>
                   </span>
                </div>

              </div>
            </div>
          </div>
          <div style="font-weight: bold;">求职意向</div>

          <div style="display: flex;">
            <div class="container" style="text-align: left; font-weight: bold;">
              <div style="margin-top: 20px; margin-bottom: 20px">意向行业</div>
              <div style="margin-top: 20px; margin-bottom: 20px">到岗时间</div>
              <div style="margin-top: 20px; margin-bottom: 20px">联系电话</div>
            </div>
            <div class="container" style="text-align: left; color: grey">
              <div style="margin-top: 20px; margin-bottom: 20px">酒店管理</div>
              <div style="margin-top: 20px; margin-bottom: 20px">30天内到岗</div>
              <div style="margin-top: 20px; margin-bottom: 20px">188*****886</div>
            </div>
          </div>
          <div style="font-weight: bold;">个人描述</div>
          <view class="container">
            <view class="item">
              <view style="color: gray">
                我是一名充满热情与责任心的客房主管，拥有扎实的酒店管理理论基础和多年的实战经验。我的职业旅程始于对客户服务行业的深深热爱，并且持续地在提高宾客满意度、提升服务质量和优化运营效率方面付出努力。
              </view>
            </view>
            <button class="invite-button" @click="changeStatus">{{ buttonText }}</button>
          </view>
        </div>
      </div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        buttonText: '邀请投递',
        isBatchEdit: false,
        isSelectedAll: false,
        applicantItems: [{
          name: "赵小宝",
          isRealname: true,
          applicantType: "零工兼职",
          location: "天河区-东圃",
          intention: "客房主管",
          amount: "0.8k - 10k",
          isApplicant: true,
          age: 25,
          degree: "本科",
          worktime: "3年",
          isSeleted: true
        }],
        jobItems: [{
          title: "客房主管",
          type: {
            id: 2,
            title: "零工兼职"
          },
          date: "2022-1-20",
          amount: '3200.00',
          recruitment: {
            need: 12,
            total: 168,
            pass: 12,
          },
          status: {
            id: 1,
            title: "招聘中"
          }
        }],
      };
    },
    methods: {
      changeStatus() {
        if (this.buttonText === '邀请投递') {
          this.buttonText = '已通过申请';
        }
      }
    }
  };
  </script>
  <style scoped>
  .app {
    background-color: hsl(0, 0%, 98%);
    height: 80vh;
    display: flex;
    flex-direction: column;
  }

  .job-item {
    margin: 1rem;
    padding: 1rem;
    background: #fff;
  }

  .job-item > view {
    margin: 1rem 0;
  }

  .job-item-header {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }

  .job-item-title {
    font-size: 24px;
  }

  .job-type {
    display: flex;
    align-items: center;
    color: white;
    padding: 0 .5rem;
    border-radius: .3rem;
  }

  .job-type-gig {
    background-color: #34A1FF;
  }

  .job-type-hourly {
    background-color: #F32763;
  }

  .job-item-dateNamount {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .job-item-recruitment {
    background-color: hsl(0, 0%, 98%);
    display: flex;
    justify-content: space-around;
    padding: 1rem;
  }

  .recruiting {
    color: #317ED0;
  }

  .job-item-recruitment > view {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .job-item-recruitment > view > text:nth-child(2) {
    color: gray;
  }

  .job-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .job-item-status {
    font-weight: 900;
  }

  .job-item-footer > .operation {
    display: flex;
    gap: 10px;
  }

  .job-item-footer > .operation > .button {
    font-size: 12px;
    padding: .25rem 1rem;
    border: 1px solid gray;
    border-radius: 10rem;
    font-weight: 900;
  }

  .operation {
    display: flex;
    gap: 20px;
    color: #00000073;
  }

  .real-name {
    border-radius: .5rem;
    background: #ffebd1;
  }

  .search-bar {
    background-image: url("../../static/images/search/collection.png");
    background-color: #fff;
    padding: 0 1rem;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-left: 23px;
    line-height: 30px;
  }


  .container {
    padding: 10px;
  }

  .item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .label {
    color: gray;
  }

  .data {
    text-align: left;
    margin-left: 10px;
  }

  .item > data {
    margin-left: auto;
  }

  .invite-button {
    display: block;
    width: auto;
    margin: 120px auto;
    text-align: center;
    background-color: #FF9E24;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }

  .invite-button:hover {
    background-color: #D8D8D8;
  }

  .container {
    text-align: left;
  }
  </style>